  <!-- 系统设置 -->
  <template>
  <div class="main-body">
    <div class="form-body">
      <el-form
              ref="form"
              class="formlayout"
              :model="form"
              label-width="140px"
              label-position="right"
            >
      <el-tabs v-model="activedTab">
        <el-tab-pane label="基础设置" name="sys">
          <div>
          
              <el-form-item
                class="dccform-line"
                label="系统名称"
                prop="sysName"
                required
                :rules="[{required: true, message: '必填'}]"
              >
                <el-input v-model="form.sysName" clearable placeholder="请输入" maxlength="50"></el-input>
              </el-form-item>
              <el-form-item class="dccform-line" label="地址" prop="address">
                <el-input v-model="form.address" clearable placeholder="请输入" maxlength="50"></el-input>
              </el-form-item>
              <el-form-item class="dccform-line" label="主办单位" prop="unit">
                <el-input v-model="form.unit" clearable placeholder="请输入" maxlength="50"></el-input>
              </el-form-item>
              <el-form-item class="dccform-line" label="版权信息" prop="footerMsg">
                <el-input v-model="form.footerMsg" clearable placeholder="请输入" maxlength="50"></el-input>
              </el-form-item>
              <el-form-item class="dccform-line" label="备案号" prop="icp">
                <el-input v-model="form.icp" clearable placeholder="请输入" maxlength="50"></el-input>
              </el-form-item>
           
          </div>
        </el-tab-pane>
        <el-tab-pane label="首页设置" name="index">
          <el-form-item class="dccform-line" label="首页图" prop="nickname">
            <el-upload
              action
              :on-change="onChange"
              :auto-upload="false"
              :show-file-list="false"
              :file-list="fileList"
            >
              <el-button size="small" plain type="primary">点击上传</el-button>
              <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过50Mb</div>
            </el-upload>
            <div>
              <div class="banner" v-for="(f, i) in fileList" :key="i">
                <el-image
                  class="banner-img"
                  :src="f.url"
                  fit="contain"
                  :preview-src-list="[f.url]"
                />
                <i class="el-icon-error" @click="delFile(i)"></i>
              </div>
            </div>
          </el-form-item>
          </el-tab-pane>
          <el-tab-pane label="关于我们" name="about">
            <el-form-item class="dccform-line" label="关于我们及联系方式" prop="aboutme">
                <el-input v-model="form.aboutme"  type="textarea"
                :rows="10" clearable placeholder="请输入" maxlength="50"></el-input>
              </el-form-item>
          </el-tab-pane>
          <el-tab-pane label="投诉手机号" name="phone">
            <el-form-item class="dccform-line" label="投诉手机号" prop="complaintPhone">
                <el-input v-model="form.complaintPhone"  clearable placeholder="请输入" maxlength="11"></el-input>
              </el-form-item>
          </el-tab-pane>
      </el-tabs>
      <el-form-item label-width="120px">
                <el-button type="primary" style="width: 120px;" @click="saveHandle">保存</el-button>
              </el-form-item>
    </el-form>
    </div>
  </div>
</template>
  
  <script>
import {
  UploadFile,
  selectFiles,
  DeleteFile,
  getConfig,
  SaveConfig,
  GetFileBase64
} from '@/api'
export default {
  data() {
    return {
      loading: false,
      form: {
        sysName: '',
        footerMsg: '',
        aboutme: '',
        icp: '',
        unit: '',
        complaintPhone: '',
        address: ''
      },
      activedTab: 'sys',
      fileList: []
    }
  },
  methods: {
    async saveHandle() {
      this.$refs['form'].validate(async (valid) => {
        if (valid) {
          // // 保存图片
          if (this.fileList.some((d) => d.status !== 'finish')) {
            await this.uploadFiles()
          }
          // 保存
          let data = []
          for (let k in this.form) {
            data.push({
              code: k,
              value: this.form[k]
            })
          }
          SaveConfig({
            data
          }).then((res) => {
            console.log('SaveConfig', res)
            if (res.code === 20000) {
              this.$store.commit('setAppConfig', this.form)
              this.$message({
                type: 'success',
                message: '保存成功'
              })
            }
          })
        }
      })
    },
    async uploadFiles() {
      return await Promise.all(
        this.fileList
          .filter((d) => d.status != 'finish')
          .map((file) => {
            this.loading = true
            let formData = new FormData()
            formData.append('file', file.raw)
            formData.append('name', file.name)
            formData.append('size', file.size)
            formData.append('type', 'banner')
            formData.append('refId', 'app-banner')
            return UploadFile(formData, (e) => {
              console.log('进度', e)
            }).then((res) => {
              console.log('UploadFile', res)
              this.loading = false
              let ff = this.fileList.find((d) => d.uid === file.uid)
              if (ff) {
                ff.status = 'finish'
              }
            })
          })
      )
    },
    delFile(index) {
      if (this.fileList[index].status === 'finish') {
        DeleteFile({ id: this.fileList[index].id }).then((res) => {
          console.log('DeleteFile', res)
          if (res.code === 20000) {
            this.fileList.splice(index, 1)
          }
        })
      } else {
        this.fileList.splice(index, 1)
      }
    },
    onChange(file) {
      console.log(file)
      if (!this.beforeAvatarUpload(file)) {
        return
      }
      file.url = URL.createObjectURL(file.raw)
      this.fileList.push(file)
    },
    beforeAvatarUpload(file) {
      file.type = file.raw.type
      const isJPG =
        ['image/jpg', 'image/png', 'image/jpeg'].indexOf(file.type) !== -1
      const isLt5M = file.raw.size / 1024 / 1024 < 50
      if (!isJPG) {
        this.$message.error('上传文件只能是 jpg/png格式!')
      }
      if (!isLt5M) {
        this.$message.error('上传文件大小不能超过 50MB!')
      }
      return isJPG && isLt5M
    },
    loadData() {
      // 加载数据
      getConfig({
        codes: ['sysName', 'unit', 'address', 'footerMsg', 'aboutme', 'icp', 'complaintPhone'].join(',')
      }).then((res) => {
        console.log('getConfig', res)
        if (res.code === 20000) {
          let form = {}
          res.data.forEach(d => {
            form[d.code] = d.value
          })
          this.form = Object.assign(
            {
              sysName: '',
              aboutme: '',
              unit: '',
              address: '',
              footerMsg: '',
              icp: '',
              complaintPhone: ''
            },
            form
          )
        }
      })
      // 加载图片
      selectFiles({
        refId: 'app-banner',
        type: 'banner'
      }).then(async res => {
        console.log('selectFiles', res)
        if (res.code === 20000) {
          this.fileList = await Promise.all(res.data.map(async d => {
            let dataText = await GetFileBase64({
              id: d.id
            }).then(res => {
              console.log('GetFileBase64', res)
              return res.code === 20000 && res.data
            })
            return {
              status: 'finish',
              id: d.id,
              uid: d.id,
              url: `data:image/jpeg;base64,${dataText}`
            }
          }))
        }
      })
    }
  },
  mounted() {
    this.loadData()
  }
}
</script>
  
  <style lang="scss" scoped>
.form-body {
  padding: 30px;
  width: 600px;
  box-sizing: border-box;
  min-height: calc(100vh - 200px);
  text-align: left;
}
.banner {
  position: relative;
  width: 100%;
  height: 100px;
  border: 1px solid #ccc;
  margin-bottom: 5px;
  box-sizing: border-box;
  overflow: hidden;
  .banner-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
  .el-icon-error {
    position: absolute;
    right: 10px;
    top: 10px;
    font-size: 20px;
    cursor: pointer;
  }
}
</style>
  